<template>
  <div class="contrain">

    <HeadTitle :left="true"
               :middle="true"
               :right="true"
               @back="back">
      <template v-slot:middle>
        <h1>帖子详情</h1>
      </template>
      <template v-slot:right>
        <van-icon name="warn-o"
                  style="font-size: 30px;"
                  @click="report" />
      </template>
    </HeadTitle>
    <div class="main"
         v-show="!isLoading">
      <h1>{{Invi.title}}</h1>
      <User :time="Invi.time"
            :user="Invi.username" />
      <span>{{Invi.main}}</span>
      <div class="operation">
        <span>
          <div v-if="isLike">
            <van-icon name="star-o"
                      @click="like" />收藏
          </div>
          <div v-else>
            <van-icon name="star"
                      @click="like" />已收藏
          </div>
        </span>
        <span>
          <van-icon name="comment-circle-o" />{{commentNums}}
        </span>
        <span>
          <div v-if="isStar">
            <van-icon name="thumb-circle-o"
                      @click="star" />点赞
          </div>
          <div v-else>
            <van-icon name="thumb-circle"
                      @click="star" />已赞
          </div>
        </span>
      </div>
      <van-button round
                  type="info"
                  size="mini"
                  v-if="$store.state.User.user._id&&Invi.username._id === $store.state.User.user._id"
                  @click="deleteInvi">删除</van-button>
    </div>
    <div class="comment"
         v-show="!isLoading">
      <div v-if="ishasComment(Invi.comments)">
        <van-empty description="评论区空空如也~来发表第一条评论吧！" />
      </div>
      <div v-else>
        <Comment v-for="(item, i) in Invi.comments"
                 :key="i"
                 :comment="item"
                 :sendId="Invi.username._id"
                 :id="id"
                 @deleteComment="updataComment" />
      </div>
    </div>
    <div class="foot">
      <input placeholder="请先登录"
             v-if="!$store.state.User.LoginStatus"
             disabled="false">
      <input v-model.trim="comment"
             v-else
             type="text"
             placeholder="说点什么">
      <van-button round
                  type="info"
                  @click="sendComment"
                  :disabled="!$store.state.User.LoginStatus">发送</van-button>
    </div>
    <van-dialog v-model="show"
                title="举报理由"
                show-cancel-button
                :before-close="BeforeClose"
                @confirm="close">
      <van-field v-model.trim="report_main"
                 rows="2"
                 type="textarea"
                 autofocus
                 autosize
                 placeholder="请输入举报内容" />
    </van-dialog>
  </div>
</template>

<script>

import User from '_c/Forum/User'
import Comment from '_c/Forum/Comment'
import HeadTitle from '_c/utils/HeadTitle'
import { getInviById, report, sendComment, deleteInvi } from '@/api/forum'
export default {
  components: { User, Comment, HeadTitle },
  props: ['id'],
  data () {
    return {
      Invi: {
        username: {
          _id: ''
        }
      },
      show: false,
      report_main: '',
      comment: '',
      isLoading: true
    }
  },
  methods: {
    like () {
      if (this.$store.state.User.LoginStatus) {
        this.$store.dispatch('like', this.id).then(() => {
          this.$toast.success('操作成功')
        })
      } else {
        this.$toast.fail('请先登录')
      }
    },
    star () {
      if (this.$store.state.User.LoginStatus) {
        this.$store.dispatch('star', this.id).then(() => {
          this.$toast.success('操作成功')
        })
      } else {
        this.$toast.fail('请先登录')
      }
    },
    fetch () {
      const toast = this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: '加载中'
      })
      getInviById(this.id).then(res => {
        this.Invi = res.data
        this.isLoading = !this.isLoading
        toast.clear()
      }).catch(() => {
        this.$router.push('/forum')
      })
    },
    updataComment (comment) {
      this.Invi.comments = comment
      this.$toast.success('删除评论成功')
    },
    report () {
      this.show = !this.show
    },
    BeforeClose (action, done) {
      if (action === 'cancel') {
        done()
      } else {
        if (!this.report_main) {
          this.$toast.fail('请输入举报理由')
          done(false)
        } else {
          done()
        }
      }
    },
    close () {
      if (this.report_main) {
        report(this.id, this.$store.state.User.user._id, this.report_main).then(() => {
          this.report_main = ''
          this.$toast.success('举报成功')
        })
      }
    },
    sendComment () {
      if (this.comment !== '') {
        sendComment(this.$store.state.User.user._id, this.comment, this.id).then(res => {
          this.Invi.comments = res.data.comments
          this.comment = ''
          this.$toast.success('评论成功')
        })
      }
    },
    deleteInvi () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否删除该帖'
      }).then(async () => {
        deleteInvi(this.id, this.$store.state.User.user._id).then(() => {
          this.$toast.success('删除成功')
          window.sessionStorage.getItem('nextpath') ? this.$router.push(window.sessionStorage.getItem('nextpath')) : this.$router.push('/forum')
        })
      })
    },
    back () {
      window.sessionStorage.getItem('nextpath') ? this.$router.push(window.sessionStorage.getItem('nextpath')) : this.$router.push('/forum')
    }
  },
  created () {
    this.fetch()
  },
  computed: {
    ishasComment () {
      return comments => {
        return comments ? comments.length === 0 : true
      }
    },
    commentNums () {
      if (this.Invi.comments) {
        return this.Invi.comments.length < 99 ? this.Invi.comments.length : '99+'
      } else {
        return 0
      }
    },
    isStar () {
      return this.$store.state.User.LoginStatus ? this.$store.state.User.user.stars.findIndex(item => item === this.id) === -1 : true
    },
    isLike () {
      return this.$store.state.User.LoginStatus ? this.$store.state.User.user.likes.findIndex(item => item === this.id) === -1 : true
    }
  }
}
</script>

<style lang="less" scoped>
.contrain {
  .main {
    padding: 30px;
    margin-top: 60px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #fff;
    border-radius: 15px;
    position: relative;
    h1 {
      margin-bottom: 20px;
    }
    span {
      position: relative;
      top: 20px;
      font-size: 16px;
      word-break: break-all;
    }
    .operation {
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      span {
        .van-icon {
          font-size: 32px;
          margin-bottom: 5px;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
    }
    .van-button {
      position: absolute;
      right: 10px;
      top: 10px;
      span {
        position: inherit;
        font-size: 10px;
      }
    }
  }
  .comment {
    padding: 30px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #fff;
    border-radius: 15px;
  }
  .foot {
    position: fixed;
    bottom: 10px;
    display: flex;
    width: 100%;
    max-width: 640px;
    justify-content: space-around;
    input {
      border: 1px solid black;
      padding-left: 10px;
      height: 30px;
      margin-left: 20px;
      margin-right: 20px;
      flex: 6;
      border-radius: 20px;
    }
    .van-button {
      margin-right: 20px;
      height: 35px;
    }
  }
}
</style>
